@media  screen and (min-width: 480px){

  body{
    margin: 0;
    padding: 0;
    font-family: 'Inter' sans-serif;
    background-color: white;
    border: none;
    overflow-x: hidden;
    font-family: 'Inter', 'Poppins', 'DM Sans', sans-serif;
  }

  html{
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
  }
  

  header{
  font-family: 'Inter', sans-serif ;
  /* height: 90px; */
  padding: 24px 16px;
  margin: 0 0 8px 0;
  background-color: white;
  display: flex;
  justify-content: space-between;
 }

 .inner-header{
  padding: 0 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

 }

 .logo-con {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 128px;
 }

 .logo-con img{
  width: 100%;
  height: 100%;
  object-fit: fill;
 }


 

 .top-nav .links-container a{
  box-sizing: border-box;
  text-decoration: none;
  padding: 20px 30px;
  display: block;
  margin: 0 0 0;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  width: 100%;
  cursor: pointer;
  font-family: 'poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #082D49;
}

.top-nav .links-container a:nth-child(2){
  box-sizing: border-box;
  text-decoration: none;
  padding: 20px 30px;
  display: block;
  margin: 0 0 0;
  align-items: flex-start;
  justify-content: center;
  height: auto;
  width: 100%;
  cursor: pointer;
  font-family: 'poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #082D49;
}

.top-nav .links-container a:nth-child(3){
  box-sizing: border-box;
  text-decoration: none;
  padding: 20px 30px;
  display: block;
  margin: 0 0 0;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  cursor: pointer;
  font-family: 'poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #082D49;
}

.top-nav .links-container a:nth-child(4){
  box-sizing: border-box;
  text-decoration: none;
  padding: 20px 30px;
  display: block;
  margin: 0 0 0;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  width: 100%;
  cursor: pointer;
  font-family: 'poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #082D49;
}




.top-nav .links-container a:hover{
  text-decoration: none;

}

.top-nav .links-container a:active{
  text-decoration: underline;

}

.top-nav .links-container svg{
  fill: #07143D;
}



.links-container{
  padding: 20px 0;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 999;
  position: fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  width: 50vw;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: -7px 0 7px rgba(134, 131, 131, 0.2);
  transition: .8s ease-out;
}

#sidebar-active{
  display: none;
}

.open-sidebar-btn{
  display: flex;

  padding: 0 20px;
}

.open-sidebar-btn svg {
  padding: 4px 0 0 0;
  height: 32px;
  width: 32px;
  fill: rgb(52, 64, 84);
}

.close-sidebar-btn{
  display: flex;
  align-self: flex-start;
  padding: 20px 20px;
}

#sidebar-active:checked ~ .links-container{
  right: 0;
 }
 
 #sidebar-active{
   display: none;
 }
 
 #sidebar-active:checked ~ .links-container{
   right: 0;
 }
 
 #sidebar-active:checked ~ #overlay{
 
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
 }


.Download-but{
  display: none;
  align-items: center;
  padding: 9px 13px;
  margin: 0;
  font-size: 9px;
  font-weight: 600;
  line-height: 13px;
  border: none;
  border-radius: 48px;
  background-color: #0DA0EA;
  color: #fff;
}

.Download-but img{
  width: 13px;
  height: 13px;
  margin: 0 0 0 6px;
}

.hero-section{
  display: flex;
  position: relative;
  padding: 0;
  background-color: #F8F8F8;
  height: 958px;
  width: 100%;
  border-radius: 0px;
  overflow: hidden;

}


.bg-decor{
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hero-text{
  width: 85%;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);

}

.hero-htext{
  color: #3D3D3D;
  text-align: center;
  font-size: 45px;
  line-height: 56px;
  letter-spacing: -2%;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin: 0 0 22px 0;
}

.hero-stext{
  color: #656565;
  margin:  0 0 30px  0;
  text-align: center;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0%;
  width: 85%;
  font-weight: 300;
  font-family: 'Poppins', sans-serif;
  
}

.available{
 
  position: absolute;
  width: initial;
  top: 43%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.available-txt{
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  color: #020C12;
}

.available-str{
  display: flex;
  flex-direction: row;
  width: 75%;
  justify-content: space-between;
}

.str-google, .str-apple{
  display: flex;
  flex-direction: row;
  border: solid;
  border-color: #082D49;
  border-width: 1px;
  border-radius: 48px;
  padding: 12px 24px;
}

.str-google img, .str-apple img{
  margin:  0 10px 0 0;
  width: 17px;
  height: 17px;
}

.str-google p, .str-apple p{
  font-size: 17px;
  line-height: 23px;
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  padding: 0;
  margin: 0;
  color: #082D49;
  font-weight: 400;
}

.hero-illustration{
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  width: 100%;
  height: 60%;
  overflow: visible;
}

.hero-illustration img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-illustration{
  display: flex;
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  width: 100%;
  height: 50%;
}

.mobile-illustration img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-us{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 92px 0 86px;
}

.about-heading{
  /* width: 80%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 82px 0;
}

.about-label, .features1-label, .addfeat-label, .portfolio-label{
  letter-spacing: 0%;
  border-bottom: 1px solid black; /* Adjust color and thickness as needed */
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 48px;
  padding: 12px 32px;
  margin: 0 0 20px 0;
  border-color: #0DA0EA;
  color: #0DA0EA;
  font-size: 15px;
  line-height: 23px;
  font-family: 'poppins';
  font-weight: 500;
  width: fit-content;
  background-color:transparent ;

}

.about-text, .features1-text, .addfeat-text, .portfolio-text{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.ab-htext, .features1-htext, .addfeat-htext, .portfolio-htext{
  font-family: 'poppins';
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -2%;
  text-align: center;
  font-size: 38px;
  padding: 0;
  margin: 0;
  width: 95%;
  color: #3D3D3D;
}

.ab-stext, .features1-stext, .addfeat-stext, .portfolio-stext{
  font-family: 'poppins';
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0%;
  text-align: center;
  padding: 0;
  margin: 19px 0 50px;
  width: 95%;
  color: #656565;
}

.features1-stext, .addfeat-stext, .portfolio-stext{
  font-family: 'poppins';
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0%;
  text-align: center;
  padding: 0;
  margin: 19px 0 0;
  width: 95%;
  color: #656565;
}


.about-heading button{
  display: flex;
  padding: 15px 20px;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: -1%;
  font-family: 'poppins',sans-serif;
  border: none;
  background-color: #0DA0EA;
  color: #fff;
  border-radius: 48px;
}

.about-heading img{
  margin: 0 0 0 10px;
  width: 30px;
  height: 30px;
}

.about-img{
  width: 100%;
  height: 458px;
  overflow: hidden;
  border-radius: 1px;
}

.about-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.features1{
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: center;
  padding: 48px 0 0 0;
}

.features1-heading{
  /* width: 80%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 80px 0;
}

.sub-feats{
  width:100%;
}

.sub-feat1, .sub-feat2, .sub-feat3{
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  width: fit-content;
  height: 1112px;
  align-items: center;
  justify-content: space-between;
}

.sub-feat2{
  flex-direction: column;
}

.sub-feat1, .sub-feat2{
  margin: 0 0 24px 0;
}

.sub-feat3{
  margin: 0 0 72px 0;
}

.feat1-txt, .feat2-txt, .feat3-txt{
  width: 98%;
}

.feat1-txt img, .feat2-txt img, .feat3-txt img{
  width: 64px;
  height: 64px;
}

.feat1-txt-head, .feat2-txt-head, .feat3-txt-head{
  font-size: 29px;
  font-weight: 500;
  line-height:41px;
  letter-spacing: 0%;
  margin: 26px 0 10px;
  padding: 0;
  font-family: 'poppins', sans-serif;
  color: #3D3D3D;
}

.feat1-txt-sub, .feat2-txt-sub, .feat3-txt-sub{
  font-size: 20px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: 0%;
  margin:  0 0 36px 0;
  padding: 0;
  font-family: 'poppins', sans-serif;
  color: #656565;
}

.feat1-txt-chk1, .feat1-txt-chk2, .feat2-txt-chk1, .feat2-txt-chk2, .feat2-txt-chk3, .feat3-txt-chk1, .feat3-txt-chk2, .feat3-txt-chk3{
  padding: 0 0 0 6px;
  margin: 0;
  display: flex;
  align-items: start;
  font-size: 18px;
  line-height: 30px;
  font-family: 'poppins', sans-serif;
  color: #656565;
}

.feat1-txt-chk1 img, .feat1-txt-chk2 img{
  margin: 0 12px 0 0;
  width: 32px;
  height: 32px;
}

.feat1-txt-chk1{
  margin: 0 0 16px 0;
}

.feat1-txt-chk2{
  margin: 0 0 32px 0;
}

.feat2-txt-chk1 img, .feat2-txt-chk2 img, .feat2-txt-chk3 img{
  margin: 0 12px 0 0;
  width: 32px;
  height: 32px;
}

.feat2-txt-chk1, .feat2-txt-chk2{
  margin: 0 0 16px 0;
}

.feat2-txt-chk3{
  margin: 0 0 32px 0;
}

.feat3-txt-chk1 img, .feat3-txt-chk2 img{
  margin: 0 12px 0 0;
  width: 32px;
  height: 32px;
}

.feat3-txt-chk1{
  margin: 0 0 16px 0;
}

.feat3-txt-chk2{
  margin: 0 0 32px 0;
}

.feat1-but, .feat2-but, .feat3-but{
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 31px;
  border: none;
  border-radius: 48px;
  background-color: #0DA0EA;
  color: #fff;
}

.feat1-but img, .feat2-but img, .feat3-but img{
  margin: 0 0 0 10px;
  width: 30px;
  height: 30px;
}

.feat1-img, .feat2-img, .feat3-img{
  width: 95%;
  height: 65%;

}

.feat1-img img, .feat2-img img, .feat3-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.add-features{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 24px 84px ;
  width:fit-content;
  overflow: hidden;
}

.addfeat-heading{
  /* width: 80%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 82px 0;

}


.addfeat1{
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 30px;
  padding: 24px 16px;
  background-color: #F6F7F9;
  margin: 0 0 54px 0;
}

.addfeat1-txt{
  width: 95%;
  height: fit-content;
}

.addfeat1-txt img{
  width: 64px;
  width: 64px;
  object-fit: cover;
}

.addfeat1-htext{
  font-size: 29px;
  font-weight: 500;
  line-height: 41px;
  letter-spacing: 0%;
  margin: 26px 0 18px;
  padding: 0;
  font-family: 'poppins', sans-serif;
  color: #3D3D3D;
}

.addfeat1-stxt{
  font-size: 18px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: 0%;
  margin:  0 0 40px 0;
  padding: 0;
  font-family: 'poppins', sans-serif;
  color: #656565;
}

.addfeat1-txt-chk1, .addfeat1-txt-chk2, .addfeat1-txt-chk3{
  padding: 0 0 0 8px;
  margin: 0;
  display: flex;
  align-items: start;
  font-family: 'poppins', sans-serif;
  color: #656565;
  font-size: 18px;
  line-height: 30px;
}

.addfeat1-txt-chk1, .addfeat1-txt-chk2{
  margin: 0 0 16px 0;
}



.addfeat1-txt-chk1 img, .addfeat1-txt-chk2 img, .addfeat1-txt-chk3 img{
  margin: 0 10px 0 0;
  width: 32px;
  height: 32px;
  object-fit: contain;
}



/* .chkbox{
  width: 20px;
  width: 20px;
  margin: 0 10px 0 0;
}

.chkbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
} */


.addfeat1-img{
  width: 100%;
  height: 50%;
  margin: 56px 0 0 0;
  border-radius: 20px;
  overflow: hidden;
  border: none;
}

.addfeat1-img img{
  width: 100%;
  height: 100%;
  object-fit:contain;
}

.addfeat23{
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
}

.addfeat2, .addfeat3{
  display: flex;
  flex-direction: column;
  width: fit-content;
  background-color: #F6F7F9;
  padding: 24px 16px;
  border-radius: 25px;
  margin: 0 0 60px 0;

}


.addfeat2-htext, .addfeat3-htext{
  font-size: 29px;
  font-weight: 500;
  line-height: 41px;
  letter-spacing: 0%;
  margin: 26px 0 18px;
  padding: 0;
  font-family: 'poppins', sans-serif;
  color: #3D3D3D;

}

.addfeat2-stext, .addfeat3-stext{
  font-size: 18px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: 0%;
  margin:  0 0 40px 0;
  padding: 0;
  font-family: 'poppins', sans-serif;
  color: #656565;
}

.cmm-icon, .cbb-icon{
  width: 64px;
  height: 64px;
}

.addfeat2-img, .addfeat3-img{
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.addfeat2-img img, .addfeat3-img img{
  width: 100%;
}


.portfolio{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 112px 0;
  width: 100%;
}

.portfolio-heading{
  /* width: 80%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 0 48px 0;
}

.portf123{
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portf1{
  padding: 20px 20px;
  width: 340px;
  height: 180px;
  border-radius: 20px;
  background-image: url('../images/portf-1.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 62px 0;
}

.portf2{
  padding: 20px 20px;
  width: 340px;
  height: 180px;
  border-radius: 20px;
  background-image: url('../images/portf-2.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 62px 0;
}

.portf3{
  padding: 20px 20px;
  width: 340px;
  height: 180px;
  border-radius: 20px;
  background-image: url('../images/portf-3.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 0;
}

.portf1-htext, .portf2-htext, .portf3-htext{
  font-family: 'DM sans', sans-serif;
  font-size: 35px;
  line-height: 48px;
  letter-spacing: -1.5px;
  margin: 0 0 14px 0;
  font-weight: 400;
  color: #3D3D3D;
}

.portf1-stext, .portf2-stext, .portf3-stext{
  font-family: 'DM sans', sans-serif;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 0px;
  margin: 0 0  0;
  text-align: center;
  color: #656565;
}


.Download-display{
  background-color: #F0F9FF;
  height: 890px;
  padding: 60px 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 84px 0;

}

.display-hd{
  font-family: 'poppins', sans-serif;
  font-size: 38px;
  line-height: 48px;
  text-align: center;
  letter-spacing: 2%;
  padding: 0 62px;
  margin: 0 0 24px 0;
  font-weight: 500;
  color: #3D3D3D;
}

.display-sd{
  font-family: 'poppins', sans-serif;
  font-size: 16px;
  line-height: 27px;
  text-align: center;
  color: #656565;
  padding: 0 24px;
  margin: 0 0 32px 0;
  /* width: 100%; */
}


.available-str2{
  display: flex;
  flex-direction: row;
  width: 75%;
  justify-content: space-between;
  margin: 0 0 114px 0;
}


.str-google2, .str-apple2{
  display: flex;
  flex-direction: row;
  border: solid;
  border-color: #082D49;
  border-width: 1px;
  border-radius: 48px;
  padding: 12px 24px;
  width: fit-content;
  height: fit-content;

}

.str-google2 img, .str-apple2 img{
  margin:  0 7px 0 0;
  width: 22px;
  height: 22px;
}

.str-google2 p{
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 23px;
  height: fit-content;
  color: #082D49;
  font-weight: 400;
}

.str-apple2 p{
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 23px;
  height: fit-content;
  color: #082D49;
  font-weight: 400;
}

.phone-display{
  width: 100%;
  height: 540px;
  /* background-image: url('../images/pd-Noise\ &\ Texture.jpg'); */
}

.phone-content{
  display: none;
  align-self: last baseline;
  width: 100%;
  height: 100%;
}

.phone-content2{
  display: flex;
  align-self: baseline;
  width: 100%;
  height: 100%;
}

.phone-content2 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 62px 18px;
  height: 400px;
  width: 92.5%;
  border-radius:  0 0;
  background-color: #F6F7F9;
  margin: 0;
}

.left-footer img {
  width: 135px;
  height: 44px;
  margin: 0 0 18px 0;
}

.left-footer{
  display: flex;
  flex-direction: column;
}

.left-footer p{
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 30px;
  width: 90%;
  color: #475467;
  margin: 0 0 32px 0;
  padding: 0;
}

.lower-nav{
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 62px 0;
}

.lower-nav a{
  text-decoration: none;
  padding: 0 ;
  display: flex;
  margin: 0 88px 16px 0;
  align-items: center;
  cursor: pointer;
  font-family: 'inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #475467;
}

.right-footer{
  display: flex;
  flex-direction: column;
  align-items: start;

}

.right-footer p{
  font-family: 'poppins', sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 400;
  color: #065686;
  margin: 0 0 20px 0;
  padding: 0;
}

.coming-str{
  display: flex;
  flex-direction: row;

}

.str-google3, .str-apple3{
  display: flex;
  flex-direction: row;
  border: solid;
  border-color: #065686;
  border-width: 1px;
  border-radius: 48px;
  padding: 21px 21px;
  height: fit-content;
  background-color:transparent;
}

.str-google3{
  margin: 0 20px 0 0;
}

.str-google3 img, .str-apple3 img{
  margin:  0 6px 0 0;
  width: 30px;
  height: 30px;
}

.str-google3 p, .str-apple3 p{
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  padding: 0;
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  color: #065686;
  font-weight: 400;
}







}